import { View } from '@tarojs/components';
import { Button, Image, TextEllipsis } from '@taroify/core';
import { imgAddPrefix } from '@/utils';
import { useEffect, useState } from 'react';

export default () => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    // 计算宽度
    const calculatedWidth = window.innerWidth - 150;
    setWidth(calculatedWidth);
  }, []);
  return (
    <View className="p-2 bg-white h-40">
      <View className="flex gap-2 items-center mb-2">
        <View className="w-16 text-center py-1 rounded bg-[#E7F1FD] text-[#609ADD]">
          文章
        </View>
        <View className=" truncate overflow-hidden">
          7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐
        </View>
      </View>
      <View className="flex justify-between items-center gap-3">
        <View className="flex-1">
          <TextEllipsis
            rows={2}
            style={{ width }}
            content="7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐7款最薄的reactr移动端框架UI组件库，针对国内是场景推荐"
          />
          <View className="flex gap-1 mt-2 text-gray-400 text-sm">
            <View>蒋川</View>
            <View>|</View>
            <View>6.4k阅读</View>
            <View>·</View>
            <View>8赞</View>
            <View>·</View>
            <View>4评论</View>
          </View>
        </View>
        <Image
          className="w-32 h-20 flex-shrink-0 rounded"
          mode="aspectFill"
          src={imgAddPrefix('http://localhost:9999/statics/touste.jpg')}
        />
      </View>
    </View>
  );
};
